<template>
	<view class="pic-centers">
		<view class="pic-items">
		
			<view class="pic-image"  v-for="(item,index) in imgUrlToArray">
					<image v-if="ImgUrl && pageCheck"
						class="imgs"
		
						@click="previewImage(index)" 
						:src="encodeURI(item)" 
						>
				
					</image>
					<image v-if="ImgUrl && !pageCheck" 
						class="imgs"
						@click="previewImage(index)" 
						:src="encodeURI(item)" 
					>
					</image>			
					<span class='del' v-if="ImgUrl" @click='delImg(index)'>x</span>
			</view>
		<image
		class="pic-image"
			@click="upafter" 
			src="../../static/images/Add(3).png" >
		</image>
		</view>
	</view> 
</template>

<script>
	import uniCard from '@/components/uni-card/uni-card.vue' 
	import {
		HTTP_REQUEST_URL,
		HEADER,
		TOKENNAME
	} from '@/config/app.js';
	import {
		getGoodsInfo,
		warehouseLists,
		calProductInfo
	} from "../../api/public.js"
	export default {
		comments: {
			uniCard,
		},
		props: {
			ImgUrl: {
				type: [String, Array],
				default: '',
			},
			status: {
				type: String,
				default: '',
			},
			pageCheck:{
				type: Boolean,
				default: false,
			},
		},
		computed:{
			
		},
		data: function() {
			let that = this;
			return {
				productList: {},
				sliderImage: [],
				imgSrc: '',
				header: {
					'Authorization': ''
				},
				urlsArray:[],
				imgUrlToArray:[],
				ImgUrls:this.ImgUrl
			};
		},
		beforeMount() {
			// setTimeout(()=>{
				if(this.ImgUrls.length > 0){
					this.imgUrlToArray =  this.ImgUrls.split(',')
				}
				// console.log('ImgUrls && pageCheck', this.ImgUrl ,'1211',this.pageCheck)
			// },50)
		},
		methods: {
			//处理图片数组中的空元素
			handleBlankElement(){
				for(let i = 0;i < this.imgUrlToArray.length; i++){
					if(this.imgUrlToArray[i] == ''){
						this.imgUrlToArray.splice(i,1)
					}
				}
			},
			handleImgs(originImg){
				// console.log('originImg',originImg)
				let img = originImg
				let arr = img.split("")
				for (let i = 0; i < arr.length; i++) {
					if (arr[i] == '\\'){
						arr[i] = '/'
					}
				}
				let imgs = arr.join("")
				return imgs
			},
			previewImage(index) {
				this.urlsArray = this.imgUrlToArray
				uni.previewImage({
					urls: [this.urlsArray[index]],
					success:function(){
					}
				});
			},
			delImg(index){
				this.imgUrlToArray.splice(index,1)
					this.$emit('uploadFileRes', this.imgUrlToArray)
			},
			upafter() {
				if (this.status == 'PASS') {
					return false
				}
			uni.showLoading({
				title: '上传中'
			});
				this.header['Authorization'] = this.$store.state.app.token;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						for(let i = 0; i < tempFilePaths.length; i++){
							uni.uploadFile({
								url: HTTP_REQUEST_URL + '/api/localStorage/uploadImage',
								filePath: tempFilePaths[i],
								name: 'file',
								header: this.header,
								formData: {},
								success: (uploadFileRes) => {
									this.imgUrlToArray.push(this.handleImgs(uploadFileRes.data))
									this.imgSrc = this.handleImgs(uploadFileRes.data)
									if(this.pageCheck == true){
										this.ImgUrls = this.handleImgs(uploadFileRes.data)
									}
									this.handleBlankElement()
									this.$emit('uploadFileRes', this.imgUrlToArray)
									this.$forceUpdate()
										uni.hideLoading()
								}
							});
						}
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	.pic-centers {
		width: 100%;
		height: 100%;
		white-space: nowrap;
		align-items: center;
		&::-webkit-scrollbar {
			display: none;
		}
		
		.pic-items {
			display: inline-block;
			width: 100%;
			height: 100%;
			background-color: #ccccccb;
			display: flex;
			flex-wrap: wrap;
			.pic-image{
				width:31% !important;
				height:200rpx;		
				display: inline-block;
			}
			.imgs {
				display: inline-block;
				border-radius: 12rpx;
				margin-right:10rpx;
				width:100% !important;
				height:100%;		
			
			
			}
		}
	}
	// .imgs{
	// 	position: relative;
	// }
	.del{
		position: absolute;
		// right: 0;
		margin-left: -50rpx;
		font-size: 30rpx;
		color: #fff;
		background: #000000;
		width: 40rpx;
		text-align: center;
		line-height: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
		border-radius: 50%;
	}
</style>
